<template>
  <div>
  <div id="pdfDom">
    <el-card>
      <div class="head">
        <div>
          <img
            style="width: 150px"
            src="@/assets/svg/p_logo_color.png"
            mode="scaleToFill"
          />
        </div>
        <div class="linespace1">
          <div class="line"></div>
        </div>
        <div class="titel">必达智慧物联报告</div>
        <div class="number">防伪编号{{ filelist.number }}</div>
      </div>

      <div class="middle">
        <div class="filename">文件名称：{{ filelist.fileName }}</div>
        <div>签署状态:{{ filelist.mode }}</div>
        <div>签署截止日期：{{ dateFormat(filelist.deadline) }}</div>
      </div>
      <div class="linespace">
        <div class="line1"></div>
      </div>
      <div>
        <div class="filename1">文件</div>
        <div
          v-for="(item, index) in documentlist"
          :key="index"
        >
          <el-button size="small" type="text" @click="down(item.url)">
            <a class="filewatch1">{{ item.name }}</a>
          </el-button>
        </div>
      </div>
      <div class="linespace">
        <div class="line1"></div>
      </div>
      <div>
        <div class="filename1">附件</div>
        <div v-if="enclosurelist==''" class="filewatch1">无</div>
        <div
          v-for="(item, index) in enclosurelist"
          :key="index"
        >
          <el-button size="small" type="text" @click="down(item.url)">
            <a class="filewatch1">{{ item.name }}</a>
          </el-button>
        </div>
        <div class="linespace">
        <div class="line1"></div>
      </div>
      </div>
      <div>
        <div class="filename1">备注</div>
        <div class="introduction" v-if="filelistInf.introduction==''">无</div>
        <div v-else class="introduction">{{ filelistInf.introduction }}</div> 
      </div>

      <div class="linespace">
        <div class="line1"></div>
      </div>

      <div>
        <div class="filename1">签署信息</div>
        <div v-for="(item,index) in signDetail" :key="index" class="filewatch1">
        {{ item }}
        </div>
      </div>

      <div class="linespace">
        <div class="line1"></div>
      </div>

      <div>
        <div class="filename1">印章信息</div>
          <div v-if="flow == ''" class="introduction">无</div>
          <div v-else class="introduction">{{ flow }}</div>
      </div>

      <div class="linespace">
        <div class="line1"></div>
      </div>

      <div>
        <div class="filename1">文件读取记录</div>
        <div v-for="(item, index) in watchlist" :key="index" class="filewatch">
          <div>{{ index + 1 }}</div>
          <div>观看人:{{ item.watchName }}</div>
          <div>观看时间：{{ dateFormat(item.beginDate) }}</div>
          <div>持续时间：{{ item.duration }} 分钟</div>
        </div>
      </div>
    </el-card>
    </div>
    <button v-on:click="getPdf()">导出</button>
  </div>
  
</template>

<script>
import { getFileByid, getflowList, getnowflow, getwatchList } from "@/http/api";

export default {
  data() {
    return {
      filelist: [],
      flow: [], //印章
      watchlist: [], //文件读取记录
      filelistInf: [],
      signDetail: [],
      documentlist: [], //文件信息
      enclosurelist: [], //附件信息
    };
  },
  created() {
    this.getinf();
    this.getfile();
    
    this.getwatch();
    this.getflow();
  },
  methods: {
    
    getinf() {
      (this.filelist = this.$route.query.id), console.log(this.filelist);
    },
    dateFormat: function (dateString) {
      var date = new Date(dateString);
      var year = date.getFullYear();
      var month =
        date.getMonth() < 9
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1);
      var day =
        date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
      var hour =
        date.getHours() < 10 ? "0" + date.getHours() : "" + date.getHours();
      var minutes =
        date.getMinutes() < 10
          ? "0" + date.getMinutes()
          : "" + date.getMinutes();
      // var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : "" + date.getSeconds();
      return year + "-" + month + "-" + day + " " + hour + ":" + minutes;
    },
    //获取文件信息
    getfile() {
      const data = {
        id: this.filelist.id,
      };
      getFileByid(data).then((res) => {
        // console.log(res);
        this.enclosurelist = res.data.enclosurelist;
        this.documentlist = res.data.documentlist;
        this.filelistInf = res.data.file;
        if (res.data.file.mode == "个人发起") {
          this.signDetail.push(
            res.data.file.applicantName +
            " 于 " +
            this.dateFormat(res.data.file.applicationDate) +
            " 发起签署")
        } else {
          this.signDetail.push(
            res.data.file.companyName +
            " 于 " +
            this.dateFormat(res.data.file.applicationDate) +
            " 发起签署")
        }
        console.log(this.signDetail)
        this.getflowinf();
        
      });
    },
    down(val){
      console.log(val)
      let link = document.createElement('a');
        link.style.display = 'none';
        link.href = this.$down_url + '/file' + val.split('/home/iaais')[1];
        console.log(link.href)
        document.body.appendChild(link);link.click();document.body.removeChild(link);
    },
    //获取签署信息
    getflowinf() {
      const data = {
        fileId: this.filelist.id,
      };
      getflowList(data).then((res) => {
        for (var i in res.data.recordlist) {
          this.signDetail.push(
            res.data.recordlist[i].passerName +
            " 于 " +
            this.dateFormat(res.data.recordlist[i].passerDate) +
            " 签署")
        }
        console.log(this.signDetail)
      });
    },
    //获取阅读记录
    getwatch() {
      const data = {
        id: this.filelist.id,
      };
      getwatchList(data).then((res) => {
        this.watchlist = res.data;
      });
    },
    //获取印章需求
    getflow() {
      const data = {
        mouldId: this.filelist.mouldId,
        grade: this.filelist.status,
      };
      getnowflow(data).then((res) => {
        this.flow = res.data.seal;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.filename {
  font-size: 18px;
  font-weight: bold;
}
.head {
  position: relative;
  text-align: center;
  align-items: center;
}
.logo {
  width: 70px;
  height: 7vh;
}
.line {
  width: 80vw;
  height: 2px;
  background: #006360;
  position: relative;
  text-align: center;
}
.titel {
  margin-top: 15px;
  font-size: 30px;
  font-weight: bold;
}
.number {
  margin-top: 5px;
  font-size: 18px;
}
.middle {
  margin-left: 5rem;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
}
.linespace1 {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}
.linespace {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.line1 {
  width: 60rem;
  height: 1px;
  background-color: black;
}
.filename1 {
  margin-top: 30px;
  margin-left: 6rem;
  font-size: 18px;
  font-weight: bold;
  color: #18716f;
}
.introduction{
  font-size: 16px;
  margin-left: 12rem;
  margin-top: 1rem;
}
.filewatch {
  display: flex;
  justify-content: space-around;
  width: 60%;
  margin-left: 12rem;
  margin-top: 1.5rem;
}
.filewatch1{
  margin-top: 1rem;
  margin-left: 12rem;
  font-size: 17px;
}
</style>